<template>
  <div class="chart">
    <div ref="chart" style="width:100%;height:376px"></div>
    <div class="x-two">
      <h3>
        <span class="circle"></span>
        套餐费约{{this.price.dataDecoration.sum}}万
      </h3>
      <van-row>
        <van-col span="6">
          <p>套餐费<span>=</span></p>
          <p>{{this.price.dataDecoration.sum}}<span>万</span></p>
        </van-col>
        <van-col span="6">
          <p>基础费<span>+</span></p>
          <p>{{this.price.dataDecoration.basis}}<span>万</span></p>
        </van-col>
        <van-col span="6" v-if="style==1">
          <p>拆改水电<span>+</span></p>
          <p>{{this.price.dataDecoration.water*1+this.price.dataDecoration.dismantle*1}}<span>万</span></p>
        </van-col>
        <van-col span="6">
          <p>税费</p>
          <p>{{this.price.dataDecoration.tax}}<span>万</span></p>
        </van-col>
      </van-row>
      <table class="table">
        <tbody>
        <tr>
          <th>费用项</th>
          <th>价格 (元/㎡)</th>
          <th>总价 (万)</th>
        </tr>
        <tr>
          <td>套餐基础费
            <van-icon name="question" @click="prompt_one"/>
          </td>
          <td colspan="0">1199</td>
          <td class="total-td">{{this.price.dataDecoration.basis}}
            <van-icon name="question" @click="prompt" v-if="this.area<=60"/>
          </td>
        </tr>
        <tr v-if="style==1">
          <td>老房拆改费</td>
          <td colspan="0">150</td>
          <td class="total-td">{{this.price.dataDecoration.water}}
            <van-icon name="question" @click="prompt" v-if="this.area<=60"/>
          </td>
        </tr>
        <tr v-if="style==1">
          <td>老房改水电</td>
          <td colspan="0">150</td>
          <td class="total-td">{{this.price.dataDecoration.dismantle}}
            <van-icon name="question" @click="prompt" v-if="this.area<=60"/>
          </td>
        </tr>
        <tr>
          <td>税费</td>
          <td colspan="0">按照3.41%收取</td>
          <td class="total-td">{{this.price.dataDecoration.tax}}</td>
        </tr>
        <tr>
          <td>个性化项目
            <van-icon name="question" @click="prompt_two"/>
          </td>
          <td colspan="2">需根据实际量房情况决定</td>
        </tr>
        <tr>
          <td>管理费</td>
          <td colspan="2">无管理费</td>
        </tr>
        <tr>
          <td>服务费</td>
          <td colspan="2">无服务费</td>
        </tr>
        </tbody>
      </table>
      <h3>
        <span class="circle"></span>
        业主其他自购费约{{this.price.dataFurniture.sum}}万
        <van-icon name="question" @click="prompt_three" color="#999"/>
      </h3>
      <van-row>
        <van-col span="6">
          <p>业主自选<span>=</span></p>
          <p>{{this.price.dataFurniture.sum}}<span>万</span></p>
        </van-col>
        <van-col span="6">
          <p>家具<span>+</span></p>
          <p>{{this.price.dataFurniture.custom+this.price.dataFurniture.other}}<span>万</span></p>
        </van-col>
        <van-col span="6">
          <p>家电<span>+</span></p>
          <p>{{this.price.dataFurniture.device}}<span>万</span></p>
        </van-col>
        <van-col span="6">
          <p>软装</p>
          <p>{{this.price.dataFurniture.adornment}}<span>万</span></p>
        </van-col>
      </van-row>
      <table class="table">
        <tbody>
        <tr>
          <th>费用项</th>
          <th>项目包含</th>
          <th>平均花费 (万)</th>
        </tr>
        <tr>
          <td>定制家具</td>
          <td colspan="0">衣柜/电视柜/餐边柜等</td>
          <td class="total-td">{{this.price.dataFurniture.custom}}</td>
        </tr>
        <tr>
          <td>其他家具</td>
          <td colspan="0">床/床垫/沙发/桌椅</td>
          <td class="total-td">{{this.price.dataFurniture.other}}</td>
        </tr>
        <tr>
          <td>家电</td>
          <td colspan="0">冰箱/洗衣机/电视等</td>
          <td class="total-td">{{this.price.dataFurniture.device}}</td>
        </tr>
        <tr>
          <td>软装</td>
          <td colspan="0">窗帘/灯具/摆件</td>
          <td class="total-td">{{this.price.dataFurniture.adornment}}</td>
        </tr>
        </tbody>
      </table>
      <div class="chartWarn">
        <van-icon name="warning" />
        <p>此价格根据市场均价计算，购买不同品牌的家具/家电/软装项目，价格也会不同</p>
      </div>
    </div>
    <van-button type="info" block class="chartButton" @click="sign">加入订单</van-button>
  </div>
</template>

<script>

import {mapState} from "vuex";
import { Dialog } from 'vant';
import {post} from "../assets/js/config/api";
export default {
  computed:mapState(['shopId','uid',"title","imageUrl"]),
  name: "Chart",

  data(){
    return{
      price: JSON.parse(sessionStorage.getItem('price')),
      area:this.$route.params.area,
      style:this.$route.params.style,
      value:this.$route.params.value,
      params:{},
    }
  },
  mounted() {
    this.getEchartData();
  },
  methods: {
    getEchartData() {
      const chart = this.$refs.chart
      const myChart = this.$echarts.init(chart)
      const option = {
        title: {
          text: '总费用',
          subtext: `${this.price.sum}万`,
          left: 'center',
          subtextStyle:{
            fontWeight:'bold',
            fontSize:30,
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '费用',
            type: 'pie',
            radius: '50%',
            data: [
              {value: this.price.dataDecoration.sum, name: '预计被窝套餐费'},
              {value: this.price.dataFurniture.sum, name: '业主自购项'},
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    prompt() {
      this.$dialog.alert({
        message: '不足60㎡按60㎡计算',
        confirmButtonColor: "#5373B2",
      })
    },
    prompt_one() {
      this.$dialog.alert({
        message: '套餐包含基础施工人工费、辅材费、地板、墙漆、橱柜、卫浴设备（不包含窗户、暖气、防盗门、家具、家电）',
        confirmButtonColor: "#5373B2",
      })
    },
    prompt_two(){
      this.$dialog.alert({
        message: '常见个性化项目包含新建墙体、吊顶、橱柜套餐外延米等',
        confirmButtonColor: "#5373B2",
      })
    },
    prompt_three() {
      this.$dialog.alert({
        message: '业主一般还需要自购家具/家电/软装等项目，品牌差异较大。此价格为市场预估价仅供参考',
        confirmButtonColor: "#5373B2",
      })
    },
    sign(){
      console.log(this.price.dataDecoration.dismantle);
      if(this.uid>0) {
        this.params.user=this.uid
        this.params.order=this.shopId
        this.params.title=this.title
        this.params.area=this.area
        this.params.style=this.style
        this.params.Decoration_dismantle=this.price.dataDecoration.dismantle
        this.params.Decoration_water=this.price.dataDecoration.water
        this.params.Decoration_tax=this.price.dataDecoration.tax
        this.params.Decoration_basis=this.price.dataDecoration.basis
        this.params.Decoration_sum=this.price.dataDecoration.sum
        this.params.dataFurniture_custom=this.price.dataFurniture.custom
        this.params.dataFurniture_other=this.price.dataFurniture.other
        this.params.dataFurniture_device=this.price.dataFurniture.device
        this.params.dataFurniture_adornment=this.price.dataFurniture.adornment
        this.params.dataFurniture_sum=this.price.dataFurniture.sum
        this.params.sum=this.price.sum
        this.params.value=this.value
        this.params.imageUrl=this.imageUrl

        post('/order',this.params).then(result=>{
          if (result.code == 200) {
                this.$router.push('/');
              }
        })



        // this.axios.post('/order',
        //     `user=${this.uid}&order=${this.shopId}&title=${this.title}&area=${this.area}&style=${this.style}&Decoration_dismantle=${this.price.dataDecoration.dismantle}
        //   &Decoration_water=${this.price.dataDecoration.water}&Decoration_tax=${this.price.dataDecoration.tax}&Decoration_basis=${this.price.dataDecoration.basis}
        //   &Decoration_sum=${this.price.dataDecoration.sum}&dataFurniture_custom=${this.price.dataFurniture.custom}&dataFurniture_other=${this.price.dataFurniture.other}
        //   &dataFurniture_device=${this.price.dataFurniture.device}&dataFurniture_adornment=${this.price.dataFurniture.adornment}&dataFurniture_sum=${this.price.dataFurniture.sum}
        //   &sum=${this.price.sum}&value=${this.value}&imageUrl=${this.imageUrl}`
        // ).then(result => {
        //   if (result.data.code == 200) {
        //     this.$router.push('/');
        //   }
        // })
      }else {
        Dialog.confirm({
          message: '前往登录',
        }).then(() => {
          this.$router.push('/login')
        }).catch(() => {
          // on cancel
        });
      }
    }
  },


}
</script>

<style lang="scss">
@import "../../public/sass/chart";
</style>
